<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
键盘事件由用户击打键盘触发，主要有keydown、.keypress、keyup三个事件<br>
keydown:按下键盘时触发。<br>
keypress:按下有值的键时触发，即按下Ctrl、Alt、Shift、Meta这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。<br>
keyup:松开键盘时触发该事件
<!-- username.onkeypress function(e){
    console.1og("keypress事件")；
        } -->
    </p>

    <input type="text" id="username"><!--  你得有个输入框才能从键盘上获取内容-->

    <input type="text" id="password">

    <script>
        var username = document.getElementById("username");
        // username.onkeydown = function(){
        //     console.log("哈哈");
            
        // } 简单验证keydown的用法

        // username.onkeydown = function(e){
        //     console.log(e.target.value);//value属性就是输入框的数据.onkeydown按下触发因此会有延迟
            
        // }
        username.onkeyup = function(e){
            console.log(e.target.value);//value属性就是输入框的数据
            
        }

        username.onkeypress = function(){
            console.log("keypress");//value属性就是输入框的数据
            
        }
        // Ctrl、Alt、Shift、Meta:数字和字母是有值的，其他的无值


        var password = document.getElementById("password");
        password.onkeyup = function(e){
            //keyCode:代表每一按键的唯一标识
            console.log(e.keyCode);//回车是13
            if(e.keyCode ===13){
                console.log("开始搜索");
                
            }
            
        }
    </script>
</body>
</html>